<template>
    <div class="main_container">
        <Modal v-model="active" title="创建横向移动" @on-ok="handleSubmit">
            <Form v-model="newData" :label-width="120" :label-colon="true">
                <FormItem label="横向移动名称">
                    <Input v-model="newData.moveName" />
                </FormItem>
                <FormItem label="关联个人任务">
                    <Select v-model="newData.myTaskId">
                        <Option v-for="(value, key) in IdNameMap" :value="key" :key="key">{{ value }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="发生时间">
                    <Input v-model="newData.attackTime" type="date" />
                </FormItem>
                <FormItem label="利用漏洞">
                    <Select v-model="newData.exploitVulsList" multiple
                        :not-found-text="newData.myTaskId == null ? '请先选择关联任务' : '无匹配数据'">
                        <Option v-for="i in VulNos[newData.myTaskId]" :value="i" :key="i">{{ i }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="移动路径 from">
                    <Input v-model="newData.fromPath" />
                </FormItem>
                <FormItem label="        to">
                    <Input v-model="newData.toPath" />
                </FormItem>
                <FormItem label="目标Ip">
                    <Input v-model="newData.targetIP" />
                </FormItem>
                <FormItem label="移动结果">
                    <Input v-model="newData.moveResult" />
                </FormItem>
            </Form>
        </Modal>
        <Row>
            <Col span="4" offset="20" class-name="button_container">
            <Button type="success" shape="circle" size="large" @click="handleCreate">新建横向移动</Button>
            </Col>
        </Row>
        <div class="list_container">
            <Collapse v-model="value">
                <Panel v-for="(moveList, key) in moveData" :name="key">
                    {{ IdNameMap[key] }}
                    <template #content>
                        <div v-for="move in moveList">
                            <Row class-name="show_div">
                                <Col span="4">
                                横向移动名：{{ move.moveName }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="5">
                                利用漏洞：{{ move.exploitVuls }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="5">
                                发生时间：{{ move.attackTime }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="4">
                                目标IP：{{ move.targetIP }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="6">
                                移动路径：{{ move.movePath }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="8">
                                移动结果：{{ move.moveResult }}
                                </Col>
                                <Divider type="vertical" />
                                <Col span="5">
                                执行时间：{{ move.moveTime }}
                                </Col>
                            </Row>
                            <Divider v-if="move != moveList[moveList.length - 1]" />
                        </div>
                    </template>
                </Panel>
            </Collapse>
        </div>
    </div>
</template>
<script>
import { Collapse, FormItem, Modal, Panel, Select } from 'view-ui-plus';

export default {
    name: "Exploit",
    data() {
        return {
            moveData: {},
            value: [],
            newData: {},
            active: false,
            IdNameMap: {},
            VulNos: {},
            username: "",
        };
    },
    methods: {
        renew() {
            this.$api.get("tester/move/list").then((res) => {
                var listData = res.data.data;
                var result = {};
                for (var k in this.IdNameMap) result[k] = [];//设置空队列
                for (var i in listData) result[listData[i].myTaskId].push(listData[i]);
                console.log(result);
                this.moveData = result;
            })
        },
        handleCreate() {
            this.active = true;
            this.newData = {};
        },
        handleSubmit() {
            this.newData.movePath = this.newData.fromPath + "-" + this.newData.toPath;
            delete this.newData.fromPath;
            delete this.newData.toPath;
            this.newData.exploitVuls = this.newData.exploitVulsList.join(" , ");
            delete this.newData.exploitVulsList;
            console.log(this.newData);
            this.$api.post("tester/move/create", this.newData).then((res) => {
                this.$Notice.info({
                    title: "提示",
                    desc: res.msg,
                });
                this.renew();
            })
        }
    },
    created() {
        this.username = sessionStorage.getItem("username");
        this.$api.get("tester/scan/vul/list").then((res) => {
            this.VulNos = res.data.data;
            this.$api.get("tester/task/map").then((res) => {
                this.IdNameMap = res.data.data;
                this.value = [];
                for (var i in this.IdNameMap) this.value.push(i);
                this.renew();
                console.log(this.VulNos);
            })
        })
    },
    components: { Collapse, Panel, Modal, FormItem, Select }
}
</script>
<style scoped>
.main_container {
    width: 90%;
    height: 98%;
    border-radius: 10px;
    padding: 10px;
    border: solid;
    margin: auto;
    margin-top: 20px;
}

.list_container {
    height: 500px;
    overflow: auto;
}

.button_container {
    padding: 15px 5px;
}

.show_div {
    width: auto;
    padding: 10px;
    border: solid;
    border-radius: 20px;
    /* font-size: normal; */
}
</style>